<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid #000;
      }
      span {
        background-color: pink;
      }
    </style>
    <script src="js/jquery.min.js"></script>
  </head>
  <body>
    <div>1234</div>
    <hr />
    <button id="append">append</button>
    <button id="prepend">prepend</button>
    <button id="after">after</button>
    <button id="before">before</button>
    <script>
      $("#append").click(function () {
        var $span = $("<span>abcd</span>");
        $("div").append($span);
      });

      $("#prepend").click(function () {
        var $span = $("<span>abcd</span>");
        $("div").prepend($span);
      });
      $("#after").click(function () {
        var $span = $("<span>abcd</span>");
        $("div").after($span);
      });
      $("#before").click(function () {
        var $span = $("<span>abcd</span>");
        $("div").before($span);
      });

      //   $("div").click(function () {
      //     $(this).remove();
      //   });

      $("div").click(function () {
        $(this).empty();
      });
    </script>
  </body>
</html>
